<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>就决定是你了，卡比兽</title>
    <style>
      *,
      *:after,
      *:before {
        box-sizing: border-box;
      }
      :root {
        --size: 60;
        --unit: calc((var(--size) / 300) * 1vmin);
        --belly: #f1debb;
        --dark-belly: #b59c78;
        --body: #355a50;
        --dark-body: #162c37;
        --foot: #965b3c;
        --claws: #fafafa;
      }
      body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: #177082;
        justify-content: center;
      }
      .snorlax {
        height: calc(237 * var(--unit));
        width: calc(300 * var(--unit));
        position: relative;
      }
      .snorlax *,
      .snorlax *:after,
      .snorlax *:before {
        position: absolute;
      }
      .snorlax:before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20%;
        border-radius: 50%;
        filter: blur(10px);
        opacity: 0.5;
        background: #111;
        transform: translate(-50%, 25%);
        left: 50%;
      }
      .snorlax__body {
        border-radius: 50% 45% 50% 50%/68% 50% 28% 30%;
        height: 74%;
        width: 79%;
        border: calc(2 * var(--unit)) solid #000;
        background: var(--body);
        overflow: hidden;
        top: 60%;
        left: 47%;
        transform: translate(-50%, -50%);
      }
      .snorlax__body-shade {
        background: var(--dark-body);
        height: 30%;
        width: 80%;
        bottom: 0;
        border-radius: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .snorlax__body-shade:after {
        content: "";
        position: absolute;
        width: 25%;
        height: 150%;
        border-radius: 50%;
        background: var(--dark-body);
        left: 9%;
        bottom: 24%;
        transform: rotate(-22deg);
      }
      .snorlax__brow {
        background: var(--belly);
      }
      .snorlax__brow--left {
        width: 50%;
        height: 100%;
        left: 5%;
        top: 11%;
        border-radius: 65% 47% 0 50%/70% 39% 0 44%;
      }
      .snorlax__brow--right {
        width: 54%;
        height: 100%;
        right: 4%;
        top: 10%;
        overflow: hidden;
        border-radius: 45% 80% 0 50%/72% 77% 0 44%;
      }
      .snorlax__brow--right:before {
        content: "";
        right: 0;
        height: 100%;
        width: 32%;
        bottom: 0;
        background: var(--dark-belly);
        z-index: 2;
      }
      .snorlax__brow--right:after {
        content: "";
        right: 16%;
        height: 100%;
        width: 32%;
        bottom: 36%;
        background: var(--belly);
        z-index: 3;
        border-radius: 0 0 75% 0/0 0 36% 0;
      }
      .snorlax__eye {
        height: calc(2 * var(--unit));
        width: 15%;
        background: #000;
        top: 33%;
        z-index: 5;
      }
      .snorlax__eye--left {
        left: 21%;
      }
      .snorlax__eye--right {
        right: 25%;
      }
      .snorlax__mouth {
        height: calc(2 * var(--unit));
        width: 30%;
        background: #000;
        top: 52%;
        left: 48%;
        transform: translate(-50%, 0);
      }
      .snorlax__tooth {
        background: #000;
        height: 235%;
        width: 20%;
        bottom: 100%;
        -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
      }
      .snorlax__tooth:after {
        content: "";
        background: var(--claws);
        height: 100%;
        width: 100%;
        -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
        transform-origin: bottom center;
        transform: scale(0.65);
      }
      .snorlax__tooth--left {
        left: 0;
      }
      .snorlax__tooth--right {
        right: 0;
      }
      .snorlax__head {
        height: 30%;
        width: 45%;
        left: 50%;
        top: 5%;
        transform: translate(-50%, 0);
      }
      .snorlax__head-outline {
        background: var(--body);
        height: 100%;
        width: 100%;
        border: calc(2 * var(--unit)) solid #000;
        border-radius: 75% 75% 25% 25%/110% 110% 0% 0%;
        overflow: hidden;
      }
      .snorlax__head-outline:after {
        content: "";
        right: -5%;
        height: 110%;
        width: 15%;
        border-radius: 50%/50%;
        top: -5%;
        background: var(--dark-body);
      }
      .snorlax__ear {
        height: 64%;
        border: calc(2 * var(--unit)) solid #000;
        background: var(--body);
        top: -14%;
        width: 35%;
        position: absolute;
        overflow: hidden;
        border-radius: 15% 85% 0 10%/20% 100% 0 80%;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);
      }
      .snorlax__ear:before {
        content: "";
        top: 0;
        left: 0;
        background: var(--body);
        position: absolute;
        z-index: 2;
        height: 100%;
        width: 15%;
        border-radius: 28%;
        transform-origin: top center;
        transform: rotate(-67deg) translate(11%, 23%);
      }
      .snorlax__ear--left {
        left: 4%;
      }
      .snorlax__ear--right {
        right: 4%;
        top: -15%;
        transform: rotateY(180deg);
      }
      .snorlax__ear--right:after {
        content: "";
        left: -10%;
        width: 25%;
        background: var(--dark-body);
        height: 100%;
        top: -10%;
        border-radius: 50%/50%;
      }
      .snorlax__belly {
        position: absolute;
        height: 50%;
        width: 82%;
        left: 50%;
        top: 0;
        transform: translate(-49%, 0%);
      }
      .snorlax__belly:after {
        content: "";
        position: absolute;
        width: 58%;
        height: 50%;
        border-top: calc(10 * var(--unit)) solid var(--belly);
        top: 90%;
        left: 50%;
        -webkit-clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
        clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%);
        transform: translate(-50%, -26%);
        z-index: 3;
        border-radius: 50% 50% 0 0/50% 50% 50% 50%;
      }
      .snorlax__belly-segment--one {
        height: 83%;
        width: 100%;
        bottom: 0%;
        left: 0%;
        background: var(--belly);
        transform-origin: 0 100%;
        transform: translate(6.5%, 13%) rotate(-20deg);
        border-radius: 40% 55% 0 17%/60% 100% 0% 40%;
        -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
        clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
        z-index: 2;
      }
      .snorlax__belly-segment--one:before {
        content: "";
        position: absolute;
        top: 100%;
        background: var(--belly);
        left: 50%;
        height: 80%;
        width: 80%;
        border-radius: 10%;
        transform: translate(-50%, -81%) rotate(10deg);
      }
      .snorlax__belly-segment--two {
        height: 90%;
        width: 100%;
        bottom: 0%;
        right: 0%;
        transform-origin: 100% 100%;
        background: var(--dark-belly);
        transform: translate(-7%, 14%) rotate(20deg);
        border-radius: 0% 34% 34% 0/0% 60% 40% 0%;
        -webkit-clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
        clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);
      }
      .snorlax__belly-segment--two:after {
        content: "";
        position: absolute;
        right: 10%;
        top: -4%;
        width: 100%;
        height: 102%;
        transform-origin: right bottom;
        transform: rotate(-2deg);
        background: var(--belly);
        z-index: 3;
        border-radius: 0 14% 19% 0/0 50% 50% 0;
      }
      .snorlax__belly-segment--two:before {
        content: "";
        background: var(--belly);
        position: absolute;
        z-index: 2;
        height: 50%;
        width: 50%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 31%) rotate(-20deg);
      }
      .snorlax__arm-left {
        height: 85%;
        width: 24%;
        left: 12%;
        top: 14%;
        transform: rotate(-21deg);
      }
      .snorlax__claws--left {
        background: #000;
        top: -4%;
        width: 60%;
        height: 10%;
        left: 48%;
        -webkit-clip-path: polygon(
          7% 100%,
          7% 39%,
          25% 73%,
          22% 11%,
          39% 42%,
          49% 0,
          61% 46%,
          74% 11%,
          79% 58%,
          95% 44%,
          90% 100%
        );
        clip-path: polygon(
          7% 100%,
          7% 39%,
          25% 73%,
          22% 11%,
          39% 42%,
          49% 0,
          61% 46%,
          74% 11%,
          79% 58%,
          95% 44%,
          90% 100%
        );
        transform: translate(-50%, 0);
      }
      .snorlax__claws--left:after {
        content: "";
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(
          7% 100%,
          7% 39%,
          25% 73%,
          22% 11%,
          39% 42%,
          49% 0,
          61% 46%,
          74% 11%,
          79% 58%,
          95% 44%,
          90% 100%
        );
        clip-path: polygon(
          7% 100%,
          7% 39%,
          25% 73%,
          22% 11%,
          39% 42%,
          49% 0,
          61% 46%,
          74% 11%,
          79% 58%,
          95% 44%,
          90% 100%
        );
        transform-origin: bottom center;
        background: #fff;
        transform: scaleY(0.8) scaleX(0.95);
      }
      .snorlax__arm-left-arm {
        background: var(--body);
        height: 68%;
        width: 100%;
        top: 0;
        left: 0;
        border-radius: 44% 54% 50% 50%/50% 60% 40% 50%;
        transform-origin: 50% 60%;
        transform: rotate(0deg);
        overflow: hidden;
        border: calc(2 * var(--unit)) solid #000;
      }
      .snorlax__arm-left-arm:after {
        content: "";
        right: 0;
        width: 50%;
        background: var(--dark-body);
        height: 120%;
        top: 50%;
        transform: translate(56%, -50%) rotate(-15deg);
        border-radius: 50%;
        -webkit-clip-path: inset(0 50% 0 0);
        clip-path: inset(0 50% 0 0);
        -webkit-animation: fade 6s infinite linear;
        animation: fade 6s infinite linear;
      }
      @-webkit-keyframes fade {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      @keyframes fade {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      .snorlax__arm-wrapper {
        -webkit-animation: wave 6s infinite ease;
        animation: wave 6s infinite ease;
        height: 100%;
        width: 100%;
        transform-origin: 56% 41%;
      }
      @-webkit-keyframes wave {
        0,
        100% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-100deg);
        }
      }
      @keyframes wave {
        0,
        100% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-100deg);
        }
      }
      .snorlax__arm-right {
        height: 50%;
        width: 17%;
        right: 7%;
        top: 28%;
        transform: rotate(-39deg);
      }
      .snorlax__claw {
        bottom: 0;
        width: 15%;
        height: 9%;
        background: #000;
        transform: translate(109%, 19%) rotate(45deg);
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
      .snorlax__claw:after {
        content: "";
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        height: 100%;
        width: 100%;
        background: #fff;
        transform: scale(0.5);
      }
      .snorlax__arm-right-arm {
        height: 100%;
        width: 100%;
        border-radius: 25% 75% 65% 35%/56% 60% 40% 30%;
        background: var(--dark-body);
        overflow: hidden;
        border: calc(2 * var(--unit)) solid #000;
      }
      .snorlax__arm-right-arm:after {
        content: "";
        height: 100%;
        width: 130%;
        border-radius: 50%;
        background: var(--body);
        bottom: 8%;
        left: -9%;
      }
      .snorlax__claws--right {
        bottom: -6%;
        left: 25%;
        height: 22%;
        width: 57%;
        background: #000;
        -webkit-clip-path: polygon(
          20% 0,
          16% 100%,
          35% 78%,
          55% 97%,
          63% 69%,
          85% 78%,
          85% 56%,
          100% 66%,
          100% 0
        );
        clip-path: polygon(
          20% 0,
          16% 100%,
          35% 78%,
          55% 97%,
          63% 69%,
          85% 78%,
          85% 56%,
          100% 66%,
          100% 0
        );
      }
      .snorlax__claws--right:after {
        height: 100%;
        width: 100%;
        content: "";
        background: #fff;
        -webkit-clip-path: polygon(
          20% 0,
          16% 100%,
          35% 78%,
          55% 97%,
          63% 69%,
          85% 78%,
          85% 56%,
          100% 66%,
          100% 0
        );
        clip-path: polygon(
          20% 0,
          16% 100%,
          35% 78%,
          55% 97%,
          63% 69%,
          85% 78%,
          85% 56%,
          100% 66%,
          100% 0
        );
        transform-origin: top center;
        transform: scaleY(0.85) scaleX(0.85);
      }
      .snorlax__left-foot {
        height: 34%;
        width: 29%;
        bottom: 0;
        left: 2.5%;
      }
      .snorlax__left-foot-foot {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: var(--belly);
        border-radius: 60% 40% 55% 40%/60% 45% 55% 40%;
        border: calc(2 * (var(--unit))) solid #000;
        overflow: hidden;
      }
      .snorlax__left-foot-foot:after,
      .snorlax__left-foot-foot:before {
        content: "";
      }
      .snorlax__left-foot-foot:after {
        border: calc(2 * var(--unit)) solid #000;
        height: 38%;
        width: 49%;
        border-radius: 50%;
        background: var(--foot);
        left: 38%;
        bottom: 11%;
        transform: rotate(-36deg);
      }
      .snorlax__left-foot-foot:before {
        background: var(--dark-belly);
        height: 73%;
        width: 100%;
        left: 32%;
        bottom: 0;
        transform-origin: left center;
        border-radius: 61% 20% 20% 37%/73% 50% 50% 50%;
        transform: rotate(10deg);
      }
      .snorlax__foot-claw {
        top: 50%;
        left: 50%;
        width: 20%;
        height: 30%;
      }
      .snorlax__foot-claw:after {
        content: "";
        background: var(--claws);
        bottom: 12%;
        height: 35%;
        width: 67%;
        left: 15%;
        border-radius: 50%;
      }
      .snorlax__foot-claw:before {
        content: "";
        bottom: 2%;
        left: 0;
        width: 100%;
        height: 56%;
        border-radius: 50%;
        background: var(--claws);
        border: calc(3 * var(--unit)) solid #000;
      }
      .snorlax__foot-claw > div {
        width: 100%;
        height: 66%;
        top: 0;
        left: 0;
        background: #000;
        -webkit-clip-path: polygon(
          0 100%,
          calc(var(--clip-point) * 1%) 0,
          100% 100%
        );
        clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
      }
      .snorlax__foot-claw > div:after {
        content: "";
        height: 100%;
        width: 100%;
        background: var(--claws);
        bottom: 0;
        left: 0;
        transform-origin: bottom center;
        transform: scale(0.7);
        -webkit-clip-path: polygon(
          0 100%,
          calc(var(--clip-point) * 1%) 0,
          100% 100%
        );
        clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);
      }
      .snorlax__foot-claw--one {
        --clip-point: 65;
        left: -5%;
        top: 52%;
        transform: rotate(-90deg);
        width: 15%;
        height: 23%;
      }
      .snorlax__foot-claw--two {
        --clip-point: 50;
        top: 9%;
        left: 3%;
        height: 26%;
        transform: rotate(-45deg);
      }
      .snorlax__foot-claw--three {
        --clip-point: 20;
        top: -10%;
        left: 34%;
        width: 21%;
        height: 25%;
      }
      .snorlax__foot-claw--four {
        --clip-point: 20;
        top: -18%;
        left: 49%;
        width: 21%;
        height: 34%;
        transform: rotate(45deg);
      }
      .snorlax__foot-claw--five {
        --clip-point: 50;
        top: 0%;
        left: 78%;
        width: 21%;
        height: 31%;
        transform: rotate(40deg);
      }
      .snorlax__foot-claw--six {
        --clip-point: 50;
        top: 37%;
        left: 95%;
        width: 19%;
        height: 27%;
        transform: rotate(90deg);
      }
      .snorlax__right-foot {
        bottom: 0;
        right: 6.5%;
        width: 28%;
        height: 35%;
      }
      .snorlax__right-foot-foot {
        height: 100%;
        width: 100%;
        border: calc(2 * var(--unit)) solid #000;
        background: var(--belly);
        overflow: hidden;
        border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;
      }
      .snorlax__right-foot-foot:before,
      .snorlax__right-foot-foot:after {
        content: "";
        bottom: 0;
      }
      .snorlax__right-foot-foot:before {
        left: 5%;
        border-radius: 50%;
        height: 62%;
        width: 77%;
        background: var(--dark-belly);
      }
      .snorlax__right-foot-foot:after {
        left: 10%;
        border-radius: 50%;
        border: calc(2 * var(--unit)) solid #000;
        bottom: 14%;
        height: 42%;
        background: var(--foot);
        width: 55%;
      }
    </style>
  </head>
  <body>
    <div class="snorlax">
      <div class="snorlax__head">
        <div class="snorlax__head-outline"></div>
        <div class="snorlax__ear snorlax__ear--left"></div>
        <div class="snorlax__ear snorlax__ear--right"></div>
        <div class="snorlax__brow snorlax__brow--left"></div>
        <div class="snorlax__brow snorlax__brow--right"></div>
        <div class="snorlax__eye snorlax__eye--left"></div>
        <div class="snorlax__eye snorlax__eye--right"></div>
        <div class="snorlax__mouth">
          <div class="snorlax__tooth snorlax__tooth--left"></div>
          <div class="snorlax__tooth snorlax__tooth--right"></div>
        </div>
      </div>
      <div class="snorlax__arm-left">
        <div class="snorlax__arm-wrapper">
          <div class="snorlax__claws--left"></div>
          <div class="snorlax__arm-left-arm"></div>
        </div>
      </div>
      <div class="snorlax__arm-right">
        <div class="snorlax__claws--right"></div>
        <div class="snorlax__arm-right-arm"></div>
        <div class="snorlax__claw"></div>
      </div>
      <div class="snorlax__body">
        <div class="snorlax__body-shade"></div>
        <div class="snorlax__belly">
          <div class="snorlax__belly-segment snorlax__belly-segment--one"></div>
          <div class="snorlax__belly-segment snorlax__belly-segment--two"></div>
        </div>
      </div>
      <div class="snorlax__left-foot">
        <div class="snorlax__left-foot-foot"></div>
        <div class="snorlax__foot-claw snorlax__foot-claw--one">
          <div></div>
        </div>
        <div class="snorlax__foot-claw snorlax__foot-claw--two">
          <div></div>
        </div>
        <div class="snorlax__foot-claw snorlax__foot-claw--three">
          <div></div>
        </div>
      </div>
      <div class="snorlax__right-foot">
        <div class="snorlax__right-foot-foot"></div>
        <div class="snorlax__foot-claw snorlax__foot-claw--four">
          <div></div>
        </div>
        <div class="snorlax__foot-claw snorlax__foot-claw--five">
          <div></div>
        </div>
        <div class="snorlax__foot-claw snorlax__foot-claw--six">
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>
